<template>
	<view class="post_item">
		<view class="post_user" v-if="showUser">
			<image mode="aspectFill" :src="post.userInfo.avatarUrl.tempFileURL" class="user_avatar"></image>
			<text class="user_name">{{ post.userInfo.nickName }}</text>
		</view>
		<view class="post_con">
			<up-text lines="2" :text="post.title"></up-text>
		</view>
		<view class="post_img">
			<up-album :urls="post.images" keyName="url" unit="rpx" multipleSize="110"></up-album>
		</view>
		<view class="post_control" v-if="showControls">
			<view class="icon" v-for="icon in icons" :key="icon._id" @click="handleClick">
				<up-icon class="size" :name="icon.name" color="#000" size="28"></up-icon>
				<text class="num">{{ icon.num }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, defineProps } from 'vue'
	
	const props = defineProps({
		post: {
			type: Object,
			redirect: true
		},
		showUser: {
			type: Boolean,
			default: true
		},
		showControls: {
			type: Boolean,
			default: true
		}
	})
	const icons = ref([
	  { name: 'share-square', num: props.post.share },
	  { name: 'chat', num: props.post.comment },
	  { name: 'thumb-up', num: props.post.like },
	  { name: 'thumb-down', num: undefined } 
	])
	
	const handleClick = () => {
		console.log(1111);
	}
	
	// console.log(props.post);
</script>

<style lang="scss" scoped>
	.post_item{background-color: #fff;margin-bottom: 10rpx;padding: 0 40rpx;overflow: hidden;}
	.post_user{display: flex;flex-wrap: nowrap;align-items: center;margin: 20rpx auto;}
	.post_user .user_name{margin-left: 10rpx;font-size: 28rpx;color: #a6a6a6;}
	.post_con{margin-bottom: 20rpx;}
	.post_control{display: flex;justify-content: space-between;padding: 50rpx 0 20rpx;}
	.post_control .icon{display: flex;align-items: center;font-weight: bold;font-size: 28rpx;}
	.post_control .icon .num{margin-left: 30rpx;}
	::v-deep .u-album__row uni-image{border-radius: 20rpx !important;}
	::v-deep .size .u-icon__icon{font-size: 50rpx !important;}
	.user_avatar{width: 50rpx;height: 50rpx;border-radius: 50%;}
</style>